<template>
    <div class="dashboard-container">
        <component :is="currentRole" />

        <el-row>
            <el-col :span="6">
                <div class="parent">
                    <div class="divTitle">社区</div>
                    <div class="child">{{homeDataVo.commCount}}个</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="parent">
                    <div class="divTitle">楼宇</div>
                    <div class="child">{{homeDataVo.buildCount}}栋</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="parent">
                    <div class="divTitle">业主</div>
                    <div class="child">{{homeDataVo.propCount}}户</div>
                    <hr class="hrClass" />
                    <div style="margin-top: 1rem;" class="divTitle">本月新增 &emsp;&emsp;&emsp;&emsp; {{homeDataVo.propCountOne}}</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="parent">
                    <div class="divTitle">设备数</div>
                    <div class="child">{{homeDataVo.eqCount}}台</div>
                    <hr class="hrClass" />
                    <div style="margin-top: 1rem;" class="divTitle">使用中 &emsp;&emsp;&emsp;&emsp;{{homeDataVo.eqUsedCount}}</div>
                </div>
            </el-col>
        </el-row>

        <div style=" margin-top: 50px; margin-left: 70px;">
            <el-row>
                出入统计
                <el-button :type="weekType" @click="week()" round>周</el-button>
                <el-button :type="monthType" @click="month()" round>月</el-button>
                <el-button :type="seasonType" @click="season()" round>季度</el-button>

            </el-row>
        </div>
        <div id="main" style="margin-top: 50px;width: 1500px; height: 500px"></div>
    </div>

</template>

<script>
import { mapGetters } from "vuex";
import adminDashboard from "./admin";
import echarts from "echarts";
import { homeDataCount } from "@/api/user/user.js";
export default {
    name: "Dashboard",
    components: { adminDashboard },
    data() {
        return {
            weekType: "primary", //默认选中 一周内数据
            monthType: "",
            seasonType: "",
            currentRole: "adminDashboard",

            //当前列
            curLine: [],
            //当前设备使用次数
            curEpUsedCount: [],
            //当前设备使用人数
            curEpUsedUsers: [],
            //一季的列
            seasonLine: [],
            //一个月的列
            monthLine: [],
            //最近七天的列
            sevenLine: [],
            //最近七天设备使用次数
            sevenEqUsedData: [],
            //最近七天设备使用的人数
            sevenUsedData: [],
            //最近一个月设备使用次数
            monthEqUsedData: [],
            //最近一个月设备使用人数
            monthUsedData: [],

            seasonEqUsedData: [],
            homeDataVo: {}
        };
    },
    computed: {
        ...mapGetters(["roles"])
    },

    mounted() {
        // this.initECharts();
        this.homeDataCount();
    },

    created() {
        this.currentRole = "";
    },

    methods: {
        //点击一周
        week() {
            this.weekType = "primary";
            this.monthType = "";
            this.seasonType = "";
            this.curLine = this.homeDataVo.sevenLine;
            this.curEpUsedCount = this.homeDataVo.sevenEqUsedData;
            this.curEpUsedUsers = this.homeDataVo.sevenUsedData;
            this.initECharts();
        },
        month() {
            this.weekType = "";
            this.monthType = "primary";
            this.seasonType = "";
            this.curLine = this.homeDataVo.monthLine;
            this.curEpUsedCount = this.homeDataVo.monthEqUsedData;
            this.curEpUsedUsers = this.homeDataVo.monthUsedData;
            this.initECharts();
        },
        season() {
            this.weekType = "";
            this.monthType = "";
            this.seasonType = "primary";
            this.curLine = this.homeDataVo.seasonLine;
            this.curEpUsedCount = this.homeDataVo.seasonEqUsedData;
            this.curEpUsedUsers = this.homeDataVo.seasonUsedData;
            this.initECharts();
        },

        //首页数据统计
        homeDataCount() {
            homeDataCount().then(res => {
                this.count = res;
                this.homeDataVo = res;
                this.curLine = this.homeDataVo.sevenLine;
                this.curEpUsedCount = this.homeDataVo.sevenEqUsedData;
                this.curEpUsedUsers = this.homeDataVo.sevenUsedData;
                this.initECharts();
            });
        },

        //ECharts 插件
        initECharts() {
            var chartDom = document.getElementById("main");
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                tooltip: {
                    trigger: "axis",
                    formatter: "{b0}<br/>{a0}: {c0}次<br />{a1}: {c1}次",
                    //指示器
                    axisPointer: {
                        type: "line",
                        lineStyle: {
                            color: "#7171C6"
                        }
                    }
                },
                
                //此处的 data  必须和  series  的name 对应  不然展示不了
                legend: {
                    data: ["设备使用次数", "设备使用人数"]
                },
                //图形位置
                grid: {
                    left: "4%",
                    right: "6%",
                    bottom: "4%",
                    top: 50,
                    containLabel: true
                },
                xAxis: [
                    {
                        type: "category",
                        //x轴坐标点开始与结束点位置都在最边缘，true为不在
                        boundaryGap: false,
                        axisLine: {
                            show: true,
                            //x轴线样式
                            lineStyle: {
                                color: "#17273B",
                                width: 1,
                                type: "solid"
                            }
                        },
                        //x轴字体设置
                        axisLabel: {
                            show: true,
                            fontSize: 12,
                            color: "black",
                            interval: 0,
                            rotate: 15
                        },
                        data: this.curLine
                    }
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "次数",
                        //y轴字体设置
                        axisLabel: {
                            show: true,
                            color: "black",
                            fontSize: 12
                        },
                        //y轴线设置显示
                        axisLine: {
                            show: true
                        },
                        //与x轴平行的线样式
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "#000",
                                width: 1,
                                type: "solid"
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: "设备使用次数",
                        type: "line",
                        smooth: true,
                        lineStyle: {
                            color: "#4d8bfc",
                            width: 2,
                            type: "solid"
                        },
                        //折线连接点样式
                        itemStyle: {
                            color: "#3084ff"
                        },
                        //折线堆积区域样式
                        areaStyle: {
                            color: "#c3e7ff"
                        },
                        data: this.curEpUsedCount
                    },
                    {
                        name: "设备使用人数",
                        type: "line",
                        smooth: true,
                        lineStyle: {
                            color: "#d256b6",
                            width: 2,
                            type: "solid"
                        },
                        //折线连接点样式
                        itemStyle: {
                            color: "#d256b6"
                        },
                        //折线堆积区域样式
                        areaStyle: {
                            color: "#efcdff"
                        },
                        data: this.curEpUsedUsers
                    }
                ]
            };

            option && myChart.setOption(option);
        }
    }
};
</script>
<style >
.parent {
    width: 20rem;
    height: 12.5rem;
    top: 1.25rem;
    left: 3.125rem;
    border: solid 1px #797979;
    position: relative;
}
.child {
    width: 4rem;
    height: 4rem;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.divTitle {
    margin-left: 0.5rem;
    margin-top: 0.5rem;
}
.hrClass {
    margin-top: 7rem;
}
</style>
